import router from './index.js'
import {useMenuStore} from '@/stores/menu.js'
import Layout from '@/Layout/index.vue'

const whiteRouter = ['/', '/login', '/error', '/404']

// 全局路由守卫
router.beforeEach((to, from, next) => {
    // 使用pinia
    const menuStore = useMenuStore()
    console.log("to = ", to)
    console.log("from = ", from)
    // console.log('init() routerList = ', menuStore.routerList)
    // console.log('getRouterList --->', menuStore.getRouterList())
    // TODO 解决pinia持久化是，不能将component 动态导入的函数表达式持久化
    // TODO 由于第一次页面跳转的时候，动态路由还没有添加，导致to.matched匹配不上，所以在添加动态路由后对to.path进行判断如果匹配就next({...to, replace: true})重新执行一直路由守卫，不匹配的化直接路由到'error/404'
    if (menuStore.routerList.length > 0 && to.matched.length == 0) {
        if (router.hasRoute('routerList')){
            router.removeRoute('routerList')
        }
        menuStore.routerList.forEach(list => {
            console.log('router add')
            router.addRoute({
                name: list.name,
                component: Layout,
                path: list.path,
                redirect: '/index',
            })
        })
        router.addRoute(
            {
                name: 'routerList',
                component: Layout,
                path: '/',
                redirect: '/index',
                children: menuStore.getRouterList()
            }
        )
        router.getRoutes().forEach(route => {
            if (to.path == route.path){
                next({...to, replace: true})
            }
        })
        next('/error/404')
        console.log("init() addRoute ", router.getRoutes())
    }else{

        // 判断是否存在白名单中
        if (whiteRouter.indexOf(to.path) == -1) {
            // 不在白名单中
            // 从pinia拿到routerList，添加到动态路由中
            // console.log("menuStore.routerList = ", menuStore.routerList)
        
            // 如果RouterList没有数据，就发送请求，就设置路由数据结构 
            if (menuStore.routerList.length == 0) {
                menuStore.generateRouter().then(() => {
                    const routerList = menuStore.routerList
                    // 添加动态路由
                    console.log('before routers = ', router.getRoutes())
                    // if (router.hasRoute('routerList')){
                        console.log('routerList', routerList)
                        router.addRoute(
                            {
                                name: 'routerList',
                                component: Layout,
                                path: '/',
                                redirect: '/index',
                                // 所有的路由都是LayOut的子路由
                                children: menuStore.getRouterList,
                            }
                        )
                    // }
                    console.log('after routers = ', router.getRoutes())
                    // console.log("add menuStore.routerList = ", menuStore.routerList)
                    // 跳转页面
                    next({...to, replace: true})
                }).catch(error => console.log('generateRouter error = ', error))
            }else {
                // 已经有动态路由了
                // console.log("routerList = ", menuStore.routerList);
                // 这里开启pinia持久化有一个问题：刷新后，routerList是从pinia拿到的，但是没有进行动态路由渲染，所以路由不到。
                // 将pinia中拿到的routerList添加到动态路由中
    
                // 1. 路由合法
                // console.log('to.matched = ', to.matched);
                if (to.matched.length != 0) {
                    console.log('路由合法');
                    next()
                }else{
                    console.log('路由不合法');
                    // 2. 路由不合法
                    next('/error/404')
                }
            }
        }else {
            // 存在白名单中
            next()
        }
    }

})

// router.beforeResolve((to, from, next) => {
//     const menuStore = useMenuStore()
    

// })